<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用条款 - UserHub</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script src="terms-of-service.js"></script>
    <link rel="stylesheet" href="terms-of-service.css">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            首页
                        </a>
                        <a href="messages.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            消息
                        </a>
                        <a href="tasks.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            任务
                        </a>
                        <a href="settings-profile.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            设置
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧用户区域 -->
                <div class="flex items-center">
                    <!-- 通知图标 -->
                    <button class="p-1 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <span class="sr-only">查看通知</span>
                        <i class="fa fa-bell-o"></i>
                    </button>
                    
                    <!-- 用户菜单 -->
                    <div class="ml-4 relative">
                        <div>
                            <button class="flex items-center max-w-xs rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/1005/200/200" alt="用户头像" id="header-avatar">
                                <span class="ml-2 hidden md:block text-sm font-medium text-gray-700" id="user-display-name">用户</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-500 hidden md:block"></i>
                            </button>
                        </div>
                    </div>
                     <!-- 下拉菜单 (默认隐藏) -->
                        <div class="user-menu-dropdown hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50" id="user-menu-dropdown">
                            <div class="py-1">
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-profile.html'">
                                    <i class="fa fa-user-circle mr-2"></i>个人资料
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-security.html'">
                                    <i class="fa fa-lock mr-2"></i>账户安全
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-notifications.html'">
                                    <i class="fa fa-bell mr-2"></i>通知设置
                                </button>
                                <div class="border-t border-gray-100 my-1"></div>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-gray-100" id="logout-button">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </button>
                            </div>
                        </div>
                    
                    <!-- 移动端菜单按钮 -->
                    <button type="button" class="ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary md:hidden" id="mobile-menu-button">
                        <span class="sr-only">打开主菜单</span>
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="hidden md:hidden" id="mobile-menu">
            <div class="pt-2 pb-3 space-y-1">
                <a href="dashboard.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    首页
                </a>
                <a href="messages.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    消息
                </a>
                <a href="tasks.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    任务
                </a>
                <a href="settings-profile.html" class="bg-primary/10 text-primary block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                    设置
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">使用条款</h1>
            <p class="text-gray-500 mt-1">UserHub 服务使用条款说明</p>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm overflow-hidden p-6 lg:p-8">
            <div class="prose max-w-none">
                <h2>1. 接受条款</h2>
                <p>通过使用UserHub服务，您同意遵守本使用条款。如果您不同意这些条款，请不要使用我们的服务。</p>
                
                <h2>2. 服务说明</h2>
                <p>UserHub提供任务管理、消息通知和个人数据管理等服务。我们保留随时修改或终止服务的权利，无需提前通知。</p>
                
                <h2>3. 用户责任</h2>
                <p>您负责：</p>
                <ul>
                    <li>维护您账户的安全性和保密性</li>
                    <li>您在服务上发布的所有内容和活动</li>
                    <li>遵守所有适用的法律法规</li>
                </ul>
                
                <h2>4. 禁止行为</h2>
                <p>使用我们的服务时，您不得：</p>
                <ul>
                    <li>侵犯任何第三方的知识产权或其他权利</li>
                    <li>上传或传播任何非法、有害、威胁性、辱骂性或其他不当内容</li>
                    <li>试图未经授权访问我们的服务或系统</li>
                    <li>干扰或破坏我们的服务或服务器</li>
                </ul>
                
                <h2>5. 知识产权</h2>
                <p>UserHub及其所有内容（包括但不限于软件、文本、图像、商标等）均受知识产权保护。除非获得我们的明确许可，否则您不得复制、分发或修改任何内容。</p>
                
                <h2>6. 免责声明</h2>
                <p>我们的服务按"原样"提供，不提供任何明示或暗示的保证。我们不对服务的可靠性、准确性或适用性做任何保证。</p>
                
                <h2>7. 责任限制</h2>
                <p>在法律允许的最大范围内，UserHub不对任何间接、偶然、特殊或后果性损害承担责任，包括但不限于利润损失、数据丢失等。</p>
                
                <h2>8. 条款修改</h2>
                <p>我们可能会不时更新本使用条款。任何修改将在发布后立即生效。您继续使用服务即表示接受修改后的条款。</p>
                
                <h2>9. 终止</h2>
                <p>我们保留随时终止您访问服务的权利，无需提前通知，如有以下情况：</p>
                <ul>
                    <li>您违反了本使用条款</li>
                    <li>提供服务给您变得不切实际或不合法</li>
                </ul>
                
                <h2>10. 适用法律</h2>
                <p>本使用条款受中华人民共和国法律管辖，不考虑其法律冲突原则。</p>
                
                <h2>11. 联系我们</h2>
                <p>如果您对本使用条款有任何疑问，请通过2659350014@qq.com与我们联系。</p>
                
                <p class="text-gray-500 mt-8">最后更新日期：2025年9月11日</p>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-connectdevelop text-primary text-xl mr-2"></i>
                    <span class="font-bold text-lg text-primary">UserHub</span>
                </div>
                <div class="flex space-x-6">
                    <a href="https://weixin.qq.com" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微信">
                        <i class="fa fa-weixin text-xl"></i>
                    </a>
                    <a href="https://im.qq.com/index" class="text-gray-400 hover:text-primary transition-colors duration-200" title="QQ">
                        <i class="fa fa-qq text-xl"></i>
                    </a>
                    <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微博">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="mt-6 border-t border-gray-200 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm text-gray-500">
                    &copy; 2023 UserHub. 保留所有权利.
                </p>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">隐私政策</a>
                    <a href="terms-of-service.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">使用条款</a>
                    <a href="help-center.html" class="text-sm text-gray-500 hover:text-primary transition-colors duration-200">帮助中心</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="terms-of-service.js" defer></script>
</body>
</html>
